<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名" size="large">
      <Icon :size="16" type="ios-person" slot="prefix"></Icon>
      </Input>
      <Input v-model="form.userNameTmp" type="text" class="hide-input"></Input>
    </FormItem>
    <FormItem prop="password">
      <Input v-model="form.passwordTmp" type="password" class="hide-input"></Input>
      <Input type="password" v-model="form.password" placeholder="请输入密码" size="large">
      <Icon :size="14" type="md-lock" slot="prefix"></Icon>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long size="large" style="margin-top:16px"
        :loading="loading">登录</Button>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    name: 'LoginForm',
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      userNameRules: {
        type: Array,
        default: () => {
          return [{
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          }]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    data() {
      return {
        form: {
          userName: '13881111111',//
          password: '123456',//
          userNameTmp: '',
          passwordTmp: '',
        }
      }
    },
    computed: {
      rules() {
        return {
          userName: this.userNameRules,
          password: this.passwordRules
        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.$emit('on-success-valid', {
              userName: this.form.userName,
              password: this.form.password
            })
          }
        })
      }
    }
  }

</script>
<style>
  .hide-input {
    width: 0;
    opacity: 0;
  }

</style>
